<template>
  <div>
    <!-- <router-view
      class="view"
      keep-alive
      transition
      transition-mode="out-in">
    </router-view> -->
    <el-container>
        <el-header>
  
          <el-menu :default-active="this.$router.path" router class="el-menu-demo" mode="horizontal" @select="handleSelect" >
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
                {{ item.navItem }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-submenu index="4" style="float: right">
              <template slot="title">管理员(席卫卫)</template>
              <el-menu-item v-for="(item,i) in userInfoList" :key="i" :index="item.name">
                {{ item.navItem }}
              </el-menu-item>      
            </el-submenu>           
          </el-menu>
  
        </el-header>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <!-- <el-breadcrumb-item></el-breadcrumb-item> -->
            <el-breadcrumb-item>{{pageName}}</el-breadcrumb-item>
             <a style="position:absolute;right:5%; "  href='https://gitee.com/xiweiwei/vudemo'><img src='https://gitee.com/xiweiwei/vudemo/widgets/widget_3.svg?color=747acf' alt='Fork me on Gitee'></img></a>
            </el-breadcrumb>
          <div style="margin-top:10px">
              <router-view
              class="view"
              keep-alive
              transition
              transition-mode="out-in">
            </router-view>
          </div>
        </el-main>
      </el-container>
    <firstcomponent></firstcomponent>
  </div>
</template>

<style>
    .el-header {
      color: #333;
      line-height: 60px;
    }
  </style>
  
  <script >
    import firstcomponent from './pages/user/index.vue'
    export default {
      components: {
        firstcomponent
      },
      data() {
        const item = {
          date: '2016-05-02',
          name: '席卫卫',
          address: '山西省运城市不知道那里的县'
        };
        return {
          activeIndex2: '1',
          tableData: Array(20).fill(item),
          test:'',
          pageName:'',
          navList: [ {
            name: '/',
            navItem: '主页面'
          },{
            name: '/user/info',
            navItem: '基本练习'
          }, {
            name: '/user/love',
            navItem: '用户信息'
          }, {
            name: '/content',
            navItem: '内容页面'
          }],
          userInfoList: [{
            name: '/',
            navItem: '修改密码'
          }, {
            name: '/',
            navItem: '注销'
          }]
        }
      },
      methods: {
        handleSelect(key,keyPath) { 
         this.$router.push(key);
         for (let index = 0; index < this.navList.length; index++) {
           const element = this.navList[index]
           if (element.name===key) {
             this.pageName=element.navItem
           }
         }
        }
      }
    }
  </script>